<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>名称：{{info.name}}</h3>
        <h3>单价：{{info.price}}</h3>
        <h3>
            <button @click="del">-</button>
            数量：{{info.num}}
            <button @click="add">+</button>
        </h3>
        <h3>总价：{{count}}</h3>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                info:{
                    name:"苹果",
                    price:5,
                    num:0
                }

            },
            methods: {
                del(){
                    if(this.info.num==0){
                        return;
                    }
                    this.info.num--
                },
                add(){
                    this.info.num++
                },
                // count(){
                //     console.log("ok");
                    
                //     return this.info.price*this.info.num
                // }

                
            },
            computed: {
                count(){  
                    return this.info.price*this.info.num
                }
            },
        })
    </script>
    
</body>
</html>